<template>
	<view>
        <my-card>
			
            <view v-if="type==='Note'">
                <text v-html="dynamic.contentHtml" class="txt"></text>
                <dynamic-file v-if="dynamic.files.length>0" :files="dynamic.files"></dynamic-file>
                
            </view>
            <view v-else-if="type==='Task'">
                任务:<text>{{ dynamic.title }}</text>
            </view>

            <view v-else-if="type==='Video'">
            </view>


            
            
            

            <view slot="title" class="uni-card__header">

				<view class="uni-card__header-box">
					<view class="uni-card__header-avatar" @tap.stop.prevent>
						<image class="uni-card__header-avatar-image" :src="dynamic.user.avatarSmaller" mode="aspectFit" />
					</view>
					<view class="uni-card__header-content">
                        <view @tap.stop.prevent>
                            <text class="uni-card__header-content-title uni-ellipsis" @click="viewUser(data.userId)">{{ dynamic.user.nickName }}</text>
                        
                            <uni-icons type="more" class="more" @click="showPopMenu(data.userId)"></uni-icons>
                            
                            <span class="timer">{{ dynamic.createdAt | filterDynamicTime }}</span>
                        </view>
				
                        <view>
                            <text class="uni-card__header-content-title uni-ellipsis gc" v-bind:key="'g-'+g.id" v-for="g in dynamic.groups" :style="{'background-color':g.color}">{{ g.title }}</text>
                            <text class="uni-card__header-content-title uni-ellipsis gc" v-bind:key="'c-'+c.id" v-for="c in dynamic.classes" :style="{'background-color':c.color}">{{ c.title }}</text>
                        </view>
					</view>
				</view>

			</view>
			<view slot="actions" class="card-actions">
				<view class="card-actions-item" @click="btnLike_Click()">
					<uni-icons :type="dynamic.liked?'heart-filled':'heart'" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">点赞<span>({{ dynamic.likeTotalCount }})</span></text>
				</view>
				<view class="card-actions-item" @click="btnComment_Click()">
					<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">评论<span>({{ dynamic.commentTotalCount }})</span></text>
				</view>
			</view>

        
            <view slot="comments" class="card-comments">
                <view v-if="dynamic.comments.length>0">
                    <my-comment v-bind:key="'comment-'+c.id" v-for="c in dynamic.comments"
                    :type="type"
                    :id="c.id"
                    :nickName="c.user.nickName"
                    :userId="c.user.id"
                    :avatar-circle="true" 
                    :title="c.user.nickName" 
                    :avatar="c.user.avatarSmallerUrl" 
                    :note="c.contentHtml" 
                    :time="c.createdAt"
                    @click="commentClick"
                    @longpress="commentLongPress"
                    >
                    </my-comment>
                </view>
                <view v-if="dynamic.remainCommentCount>0" @click="loadMoreComments()">
                    <uni-load-more :status="moreCommentStatus" :contentText="moreCommentContext"></uni-load-more>
                </view>

                

                <uni-section v-if="showCommentInput" title="评论" type="line" padding :id="'comment-wrapper-'+dynamic.id">
                    <uni-easyinput type="textarea" v-model="commentContent" placeholder="请输入内容"></uni-easyinput>
                    <button type="default" @click="replyComment" size="mini" :disabled="replayBtnDisabled">回复</button>
                </uni-section>

            </view>

        
            
            
		</my-card>
        
	</view>
</template>

<script>
    import { nextTick } from 'vue'
    import * as userService from "../../services/UserService";
    import * as env from '../../env';
    import * as Constant from '../../utils/constant';
    import * as date from '../../utils/date';
    import * as dynamicService from "../../services/DynamicService";


    function removeComment(comments,id){
        for(let i=0;i<comments.length;i++){
            if(comments[i].id==id){
                comments.splice(i,1);
                break;
            }
        }
    }
  
	export default {
        emits:['delDynamic'],
        data(){
            return {
                dynamic:{},
                type:null,
                id:0,
                srcId:0,
                showCommentInput:false,
                moreCommentStatus:'more',
                moreCommentContext:{contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"},
                commentContent:'',
                replayBtnDisabled:false
            }
        },
        watch:{
            data:{
                handler(newVal,oldVal){
                    this.init();
                },
                immediate:true
            }
        },
        created(){
            //this.init();
        },
        filters:{
            filterDynamicTime(val){
                return date.formatDate(val);
            }
        },
        methods: {
            init(){
                this.type = this.data.type;
                this.srcId = this.data.srcId;
                this.id = this.data.id;
                this.dynamic = this.data.dynamicData;
                this.dynamic.user.avatarSmaller = env.fileUrl + this.dynamic.user.avatarSmaller;
                for(let c of this.dynamic.comments){
                    c.user.avatarSmallerUrl=env.fileUrl+c.user.avatarSmaller;
                }
            },
            viewUser(userId){
                console.log(userId);
            },
            btnComment_Click(){
                this.showCommentInput=!this.showCommentInput;
                if(this.showCommentInput){
                    this.$nextTick(()=>{
                        uni.pageScrollTo({
                            selector:'#comment-wrapper-'+this.dynamic.id
                        })
                    })
                }
                
            },
            btnLike_Click(){
                let liked = !this.dynamic.liked;
                userService.editLike({
                    srcId:this.srcId,
                    type:this.type,
                    like:liked
                }).then(res=>{
                    if(res.code==Constant.SUCCESS){
                        this.dynamic.liked=liked;
                        if(liked){
                            this.dynamic.likeTotalCount++;
                        }else{
                            this.dynamic.likeTotalCount--;
                        }
                        uni.showToast({
                            title:(liked?'点赞':'取消')+'成功'
                        })
                    }
                })
            },
            replyComment(){
                let comment={
                    type:this.type,
                    srcId:this.srcId,
                    content:this.commentContent,
                    contentHtml:this.commentContent
                }


                if(comment.content==null || comment.content.replace(/(^s*)|(s*$)/g, "").length==0){
                    uni.showToast({
                        title:'内容不能为空!',
                        icon:'error'
                    })
                    return;
                }



                userService.addComment(comment).then(res=>{
                    if(res.code==Constant.SUCCESS){
                        this.loadMoreComments((this.dynamic.remainCommentCount<0?0:this.dynamic.remainCommentCount)+1);
        
                        this.dynamic.commentTotalCount++;

                        this.commentContent='';
                        this.showCommentInput=false;
                    }
                })
            },
            commentClick(res){
                console.log(res);
            

                let me =  uni.getStorageSync('me');
                if(res.data.userId==me.id){
                    //myself
                    uni.showToast({title:'wwww'});
                }else{
                    this.showCommentInput=true;
                    this.commentContent+='@'+res.data.nickName+'('+res.data.userId+')';

                    this.$nextTick(()=>{
                        uni.pageScrollTo({
                            selector:'#comment-wrapper-'+this.dynamic.id
                        })
                    })
                    
                }
                
            },
            commentLongPress(res){
                console.log('######res',res);

                let me =  uni.getStorageSync('me');

                let data = res.data;
                if(data.userId!=me.id){
                    return;
                }
                uni.showActionSheet({
                    itemList: ['删除'],
                    success: (e) => {
                        if(e.tapIndex==0){
                            console.log('hide---');
                            userService.delComment(data.type,data.id).then(res=>{
                                if(res.code==Constant.SUCCESS){
                                    removeComment(this.dynamic.comments,data.id);
                                }
                            })
                        }
                        
                        console.log('选中了第' + (e.tapIndex + 1) + '个按钮,userid=',e);
                    },
                    fail: (e) => {
                        console.log(e.errMsg);
                    }
                })
            },
            loadMoreComments(pageSize){

                
                let reqComments = {
                    preId:this.dynamic.comments.length>0?this.dynamic.comments[this.dynamic.comments.length-1].id:0,
                    srcId:this.srcId,
                    pageSize:pageSize==null?5:pageSize,
                    type:this.type
                }

                this.moreCommentStatus='loading';
                
                userService.queryCommentsPagely(reqComments).then(res=>{
                    console.log('#########queryCommentsPagely,',res);
                    if(res.code==Constant.SUCCESS){
                        for(let c of res.data){
                            c.user.avatarSmallerUrl=env.fileUrl+c.user.avatarSmaller;
                        }
                        this.dynamic.comments = this.dynamic.comments.concat(res.data);
                        if(res.remainCount>0){
                            this.moreCommentStatus='more';
                        }else{
                            this.moreCommentStatus='no-more';
                        }
                    }
                })
                
            },
            showPopMenu(userId){
                let me =  uni.getStorageSync('me');
                let arrMenus = [];
                let isMine = me.id==userId;
                if(isMine){
                    arrMenus.push('编辑');
                    arrMenus.push('删除');
                }else{
                    arrMenus.push('隐藏');
                }
                uni.showActionSheet({
                    itemList: arrMenus,
                    success: (e) => {
                        if(isMine){
                            if(e.tapIndex==0){
                                console.log('edit');
                                uni.navigateTo({
                                    url:'/pages/dynamic/publish?isEdit=true&id='+this.id
                                })
                            }else if(e.tapIndex==1){
                                console.log('del');
                                // dynamicService.delDynamicBySrcIdAndType(this.data.srcId,this.data.type).then(res=>{
                                //     if(res.code==Constant.SUCCESS){
                                //         //删除成功

                                //         uni.showToast({title:'删除成功!'});
                                //     }
                                // })
                                this.$emit('delDynamic',this.data.id);
                            }
                        }else{
                            if(e.tapIndex==0){
                                console.log('hide');
                            }
                        }
                        
                        console.log('选中了第' + (e.tapIndex + 1) + '个按钮,userid=',e);
                    },
                    fail: (e) => {
                        console.log(e.errMsg);
                    }
                })
            }
        },
		props:{
            data:{}
        }
	}
</script>

<style lang="scss">
    $uni-border-3: #EBEEF5 !default;
	$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
	$uni-main-color: #3a3a3a !default;
	$uni-base-color: #6a6a6a !default;
	$uni-secondary-color: #909399 !default;
	$uni-border-color:$uni-border-3;
	$uni-shadow: $uni-shadow-base;
	$uni-card-title: 15px;
	$uni-cart-title-color:$uni-main-color;
	$uni-card-subtitle: 12px;
	$uni-cart-subtitle-color:$uni-secondary-color;
	$uni-card-spacing: 10px;
	$uni-card-content-color: $uni-base-color;

    .card-actions{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
        .card-actions-item{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
	}

    .txt{
        word-break: break-all;
    }
 
    .uni-card__header {
        display: flex;
        border-bottom: 1px $uni-border-color solid;
        flex-direction: row;
        align-items: center;
        padding: $uni-card-spacing;
        overflow: hidden;

        .uni-card__header-box {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex: 1;
            flex-direction: row;
            align-items: center;
            overflow: hidden;
        }

        .uni-card__header-avatar {
            width: 40px;
            height: 40px;
            overflow: hidden;
            border-radius: 5px;
            margin-right: $uni-card-spacing;
            .uni-card__header-avatar-image {
                flex: 1;
                width: 40px;
                height: 40px;
            }
        }

        .uni-card__header-content {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            justify-content: center;
            flex: 1;
            // height: 40px;
            overflow: hidden;

            .uni-card__header-content-title {
                font-size: $uni-card-title;
                color: $uni-cart-title-color;
                line-height: 22px;
            }

            .uni-card__header-content-subtitle {
                font-size: $uni-card-subtitle;
                margin-top: 5px;
                color: $uni-cart-subtitle-color;
            }

            .more{
                margin-left: 3px;
                float:right;
            }

            .timer{
                font-size: smaller;
                float: right;
            }

            .gc{
                font-size:xx-small;
                margin-right: 2px;
                padding: 2px;
                color:white;
                border-radius: 5px;
            }

        }

        .uni-card__header-extra {
            line-height: 12px;

            .uni-card__header-extra-text {
                font-size: 12px;
                color: $uni-cart-subtitle-color;
            }
        }
    }
</style>
